<template>
  <div class="recruitment-view">
    <h1>Job Opportunities</h1>
    <div class="company-list">
      <el-card
        v-for="company in companies"
        :key="company.id"
        class="company-card"
      >
        <div class="company-header">
          <el-avatar
            :size="60"
            :src="company.logo"
          />
          <div class="company-info">
            <h2>{{ company.name }}</h2>
            <p>{{ company.location }}</p>
          </div>
        </div>
        <div class="job-openings">
          <h3>Open Positions</h3>
          <el-table
            :data="company.positions"
            style="width: 100%"
          >
            <el-table-column
              prop="title"
              label="Position"
            />
            <el-table-column
              prop="type"
              label="Type"
              width="120"
            />
            <el-table-column
              label="Actions"
              width="180"
            >
              <template #default="{ row }">
                <el-button
                  type="primary"
                  size="small"
                  @click="applyForPosition(company.id, row.id)"
                >
                  Apply
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecruitmentView',
  data() {
    return {
      companies: [
        {
          id: 1,
          name: 'TechCorp',
          logo: '',
          location: 'San Francisco, CA',
          positions: [
            { id: 1, title: 'Frontend Developer', type: 'Full-time' },
            { id: 2, title: 'Backend Engineer', type: 'Full-time' }
          ]
        }
      ]
    }
  },
  methods: {
    applyForPosition(companyId, positionId) {
      console.log(`Applying to company ${companyId} for position ${positionId}`)
      // TODO: Implement application logic
    }
  }
}
</script>

<style scoped>
.recruitment-view {
  padding: 20px;
}

.company-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.company-header {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.company-info h2 {
  margin: 0;
}

.company-info p {
  margin: 5px 0 0;
  color: #666;
}

.job-openings {
  margin-top: 15px;
}
</style>
